<template>
  <div class="_raffle">
    <div class="_daily">
      <div class="_daily-content">
        <div class="_daily-wrapper">
          <div class="_daily-title">Daily Raffle #19 $5,000</div>
          <div class="_daily-button _text-middle">
            Raffle Draws in 14H 30M 43S
          </div>
        </div>
      </div>
    </div>
    <div class="_about">
      <div class="_about-desc">
        <div class="_text-middle _about-title">About the Daily Raffle</div>
        <div class="_desc _text-small">
          Spend $1 or more for a chance to win up to $2,000.00 USD! Every day,
          20 lucky winners are randomly selected. If you win, simply click
          'Claim' to collect your prize. Don't miss out—open packs now and see
          if today is your lucky day!
        </div>
      </div>
      <div class="_about-list">
        <div class="_about-item">
          <div class="_img-wrapper"></div>
          <div class="_about-desc _text-middle">
            Open daily packs for a chance to win!
          </div>
        </div>
        <div class="_about-item">
          <div class="_img-wrapper"></div>
          <div class="_about-desc _text-middle">
            Time is running out -- don't miss your chance!
          </div>
        </div>
      </div>
    </div>
    <div class="_table">
      <el-table size="large">
        <el-table-column label="#" width="50px"></el-table-column>
        <el-table-column label="Raffle #18 Winners"></el-table-column>
        <el-table-column label="Tickets"></el-table-column>
        <el-table-column label="Reward" align="right"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
._raffle {
  @apply flex flex-col;
  gap: 1.25rem;
  ._daily,
  ._about,
  ._table {
    background: #232829;
    border-radius: 0.5rem;
  }

  ._daily {
    padding: 2.44rem 2.31rem;
    aspect-ratio: 62 / 16;
    min-height: 0;
    ._daily-content,
    ._daily-wrapper {
      width: 100%;
      height: 100%;
    }
    ._daily-content {
      padding: 1rem 1.25rem;
      background: #1a1b1c;
      ._daily-wrapper {
        @apply flex flex-col items-center justify-between;
        padding: 1.81rem 0 0.81rem;
        border-radius: 0.63rem;
        border: 0.06rem solid #353636;
        ._daily-title {
          @apply relative;
          font-size: 1.88rem;
          line-height: 2.31rem;
          background-color: inherit;
          &::before,
          &::after {
            @apply absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 0.06rem;
            background-color: #353636;
            content: "";
          }

          &::before {
            left: -10rem;
            width: 9.14rem;
          }

          &::after {
            right: -10rem;
            width: 9.14rem;
          }
        }

        ._daily-button {
          @apply flex items-center justify-center;
          width: 18.94rem;
          height: 2.5rem;
          border-radius: 0.63rem;
          border: 0.06rem solid #353636;
        }
      }
    }
  }

  ._about {
    @apply flex flex-col;
    gap: 1.81rem;
    padding: 1.75rem 1.19rem 2.75rem;
    aspect-ratio: 62 / 17.63;
    min-height: 0;
    ._about-desc {
      @apply flex items-start;
      gap: 10.44rem;
      ._about-title {
        padding-left: 0.38rem;
      }
      ._desc {
        @apply flex-1 w-0;
        padding-top: 0.31rem;
        color: #cacaca;
        line-height: 1.25rem;
      }
    }

    ._about-list {
      @apply flex items-stretch;
      gap: 1.63rem;
      ._about-item {
        @apply flex items-center flex-1 w-0;
        aspect-ratio: 29 / 7.25;
        min-height: 0;
        background: #1a1b1c;
        border-radius: 0.63rem;
        ._img-wrapper {
          width: 12.13rem;
        }
        ._about-desc {
          padding-right: 3.81rem;
          line-height: 1.88rem;
        }
      }
    }
  }
}
</style>
